<template>
  <div class="receipt-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" ref="filterTable" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button v-if="currentIndex == 'TO_HAND' && $authPass('oms.order.package.completeOutboud')" class="gray-outline mr10" @click="directShipment">直接出库</a-button>
          <a-button v-if="currentIndex == 'TO_HAND' && $authPass('oms.order.package.submitPicking')" class="gray-outline mr10" @click="submit">提交拣货</a-button>
          <a-button class="gray-outline mr10" @click="printOutOrder" v-if="$authPass('oms.order.package.printOutboundbill')">打印出库单</a-button>
          <a-button class="gray-outline mr10" @click="print" v-if="$authPass('oms.order.package.printExpressLabel')">打印面单</a-button>
          <a-button class="gray-outline mr10" @click="showLogisticsOrderModal">物流下单</a-button>
          <a-button type="text" @click="copy">一键复制订单号</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-two-line show-border-table" :expandable="{}" v-model:expandedKeys="expandedKeys" v-model:selected-keys="ids" row-key="id" :row-selection="rowSelection" :loading="loading" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="平台单号" #cell="{ record }" :width="120">
                <span class="highlight" @click="showDetail(record)" style="cursor: pointer">{{ $extract(record, 'order.platformOrderNumber') }}</span>
              </a-table-column>
              <a-table-column title="出库单号" :width="120">
                <template #title>
                  <div>出库单号</div>
                  <div>包裹号</div>
                </template>
                <template #cell="{ record }">
                  <div>{{ record.outOrderNumber }}</div>
                  <div>{{ record.packageNumber }}</div>
                </template>
              </a-table-column>
              <a-table-column title="店铺" #cell="{ record }" :width="120">
                <span>{{ $extract(record, 'order.shopName') }}</span>
              </a-table-column>
              <a-table-column title="仓库" #cell="{ record }" :width="120">
                {{ record.warehouseName }}
              </a-table-column>
              <a-table-column title="状态" #cell="{ record }" :width="120">
                {{ filterStatus($extract(record, 'order.status')) }}
              </a-table-column>
              <a-table-column title="收货国家" #cell="{ record }" :width="120">
                <span>{{ $extract(record, 'order.address.country') }}-{{ $extract(record, 'order.address.countryCode') }}</span>
              </a-table-column>
              <a-table-column title="省州/城市" #cell="{ record }" :width="120">
                <div>{{ $extract(record, 'order.address.stateOrRegion') }}</div>
                <div>{{ $extract(record, 'order.address.city') }}</div>
              </a-table-column>
              <a-table-column title="渠道" #cell="{ record }" :width="120">
                {{ $extract(record, 'shippingMethodName') || '--' }}
              </a-table-column>
              <a-table-column title="承运商" #cell="{ record }" :width="120">
                {{ $extract(record, 'carrier') || '--' }}
              </a-table-column>
              <a-table-column title="运单号" #cell="{ record }" :width="140">
                <div>
                  <span>{{ $extract(record, 'waybillNumber') || '--' }}</span>
                  <span class="highlight icon icon-daohangdizhi icon-address" @click="showAddress(record)"></span>
                  <span class="icon icon-guzhangtijiao icon-error"></span>
                </div>
              </a-table-column>
              <a-table-column title="跟踪号" #cell="{ record }" :width="100">
                <textHidden :rowsWidth="90" v-if="record.shipStatus != 'CREATEFAIL'">{{ $extract(record, 'trackingNumber') || '--' }}</textHidden>
                <div style="color: red" v-else>失败</div>
              </a-table-column>
              <a-table-column title="下单时间" #cell="{ record }" :width="140">
                {{ $setTime($extract(record, 'order.gmtPurchase')) }}
              </a-table-column>
              <a-table-column title="承诺发货时间" #cell="{ record }" :width="140">
                <div>
                  {{ $setTime($extract(record, 'order.gmtLatestShip')) }}
                </div>
                <div>
                  <a-countdown :value="$extract(record, 'order.gmtLatestShip') ? new Date($extract(record, 'order.gmtLatestShip')).valueOf() : now" :now="now" format="D 天 H 时 m 分 s 秒" />
                </div>
              </a-table-column>
              <a-table-column title="实际出库时间" #cell="{ record }" :width="140">
                {{ $setTime($extract(record, 'gmtDeliveryed')) }}
              </a-table-column>
              <a-table-column title="运出时间" #cell="{ record }" :width="140">
                {{ $setTime($extract(record, 'gmtShipped')) }}
              </a-table-column>
              <a-table-column title="拣货员" #cell="{ record }" :width="100">
                {{ record.pickerName ? record.pickerName : '--' }}
              </a-table-column>
              <a-table-column title="打印" #cell="{ record }" :width="120">
                <div>出库单已打印({{ record.printOutboudBill ? record.printOutboudBill : 0 }})</div>
                <div>面单已打印({{ record.printExpressLabel ? record.printExpressLabel : 0 }})</div>
              </a-table-column>
              <a-table-column title="操作" #cell="{ record }" :width="80" fixed="right">
                <a-button type="text" class="fl" @click="showDetail(record)">详情</a-button>
                <a-dropdown @select="btnHandleSelect($event, record)">
                  <icon-more class="highlight btn-icon fl" />
                  <template #content>
                    <a-doption value="提交拣货" v-if="['TO_HAND'].includes(record.status) && $authPass('oms.order.package.submitPicking')">提交拣货</a-doption>
                    <a-doption value="直接出库" v-if="['TO_HAND'].includes(record.status) && $authPass('oms.order.package.completeOutboud')">直接出库</a-doption>
                    <a-doption value="打印出库单" v-if="['TO_HAND', 'IN_PICKING', 'TO_OUTBOUND'].includes(record.status) && $authPass('oms.order.package.printOutboundbill')">打印出库单</a-doption>
                    <a-doption value="打印面单" v-if="['TO_HAND', 'IN_PICKING', 'TO_OUTBOUND'].includes(record.status) && $authPass('oms.order.package.printExpressLabel')">打印面单</a-doption>
                    <a-doption value="物流下单" v-if="['IN_PICKING', 'TO_OUTBOUND'].includes(record.status)">物流下单</a-doption>
                    <a-doption value="撤回待审核" v-if="['TO_HAND'].includes(record.status) && $authPass('oms.order.package.rollbackTocheck')">撤回待审核</a-doption>
                    <a-doption value="撤回待处理" v-if="['IN_PICKING', 'TO_OUTBOUND'].includes(record.status) && $authPass('oms.order.package.rollbackTohand')">撤回待处理</a-doption>
                    <a-doption value="修改拣货员" v-if="['IN_PICKING'].includes(record.status) && $authPass('oms.order.package.updatePickers')">修改拣货员</a-doption>
                    <a-doption value="完成拣货" v-if="['IN_PICKING'].includes(record.status) && $authPass('oms.order.package.completePicking')">完成拣货</a-doption>
                    <a-doption value="确认出库" v-if="['TO_OUTBOUND'].includes(record.status) && $authPass('oms.order.package.completeOutboud')">确认出库</a-doption>
                    <a-doption value="日志">日志</a-doption>
                  </template>
                </a-dropdown>
              </a-table-column>
            </template>
            <template #expand-row="{ record }">
              <div class="product-item">
                <div class="left">
                  <div class="left-item" v-for="item of record.packageItemList" :key="item.id">
                    <div>
                      <ImgPopover :src="getImage(item)">
                        <template #con>
                          <div style="width: 40px; height: 40px; position: relative; overflow: hidden">
                            <img width="40" height="40" :src="getImage(item)" />
                          </div>
                          <div class="product-status" v-if="-199 <= item.status && item.status <= -100">
                            <span>已取消</span>
                          </div>
                        </template>
                      </ImgPopover>

                      <!-- <ImgPopover :src="getImage(item)">
                        <template #con>
                          <img width="40" height="40" :src="getImage(item)" />
                        </template>
                      </ImgPopover> -->
                    </div>
                    <div style="width: 120px; margin-left: 10px">
                      <div class="highlight">
                        <TextHidden position="top" :rows="1">{{ item.asin }}</TextHidden>
                      </div>
                      <div class="highlight">
                        <TextHidden position="top" :rows="1">{{ item.msku }}</TextHidden>
                      </div>
                    </div>
                    <div style="width: 130px">
                      <div style="display: flex">
                        <div class="label-text">SKU：</div>
                        <div>
                          <ShowSpuDetailBySku :val="item.productSku" :showLimit="true" :rows="1" />
                        </div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">销售：</div>
                        <div>{{ item.salerName }}</div>
                      </div>
                    </div>
                    <div style="width: 180px">
                      <div style="display: flex">
                        <div class="label-text">发货数：</div>
                        <div>{{ item.qtyShipped }}</div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">可用库存：</div>
                        <div>{{ availableStock(item).num }}</div>
                        <div class="stockout" v-if="availableStock(item).show">缺货</div>
                      </div>
                    </div>
                    <div style="width: 180px">
                      <div style="display: flex">
                        <div class="label-text">包装：</div>
                        <div>
                          <TextHidden position="top" :rows="1" :rowsWidth="80">包装1</TextHidden>
                        </div>
                      </div>
                      <div style="display: flex">
                        <div class="label-text">包装库存：</div>
                        <div>222</div>
                        <div class="stockout">缺货</div>
                      </div>
                    </div>
                    <div>
                      <div class="label-text">备注：</div>
                      <div>
                        <div class="fl">
                          <textHidden :rowsWidth="90">{{ item.remark }}</textHidden>
                        </div>
                        <span class="highlight fl" style="display: inline-block; margin-left: 5px; cursor: pointer"><icon-edit /></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div style="display: flex">
                    <div class="label-text" style="width: 70px">买家留言：</div>
                    <div style="width: 230px">
                      <span>{{ $extract(record, 'order.buyerLeaveMessage') }}</span>
                    </div>
                  </div>
                  <div style="display: flex">
                    <div class="label-text" style="width: 70px">订单备注：</div>
                    <div style="width: 230px">
                      <span>{{ orderRemark(record.order) }}</span>
                      <span class="highlight" style="display: inline-block; margin-left: 5px; cursor: pointer"><icon-edit /></span>
                    </div>
                  </div>
                  <div style="display: flex" v-if="record.shipStatus == 'CREATEFAIL'">
                    <div class="label-text" style="width: 120px">物流下单失败原因：</div>
                    <div style="width: 180px">
                      <textHidden :rowsWidth="90">{{ record.createShipErrorMsg }}</textHidden>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>

  <SubmitPick ref="submitPick" :title="title" :ids="ids" @save="getList" />
  <Withdraw ref="withdraw" :title="title" :ids="ids" @save="getList" />
  <CommonLogsDialog v-if="showLogDialog" api="listOrderLogs" :id="id" :isShow="showLogDialog" @closed="showLogDialog = false" />
  <Detail ref="detail" :id="id" :getImage="getImage" />
  <LogisticsOrder ref="logisticsOrder" :ids="ids" @save="getList" />
  <AddressList ref="address" :id="id" />
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { getShopMarketAll } from '@/api/base'
  import { getOrganizesUser } from '@/api/system'
  import { findShopMarketByParam, getOrderPackageList, printExpressLabel, completePicking, findInventoryBatch } from '@/api/order'
  import { Message, Modal } from '@arco-design/web-vue'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import useClipboard from 'vue-clipboard3'
  import SubmitPick from './submitPick.vue'
  import Withdraw from './withdraw.vue'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'
  import Detail from './detail.vue'
  import LogisticsOrder from './logisticsOrder.vue'
  import AddressList from './addressList.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      FilterTable,
      TableWrap,
      SubmitPick,
      Withdraw,
      CommonLogsDialog,
      Detail,
      LogisticsOrder,
      AddressList,
    },
    props: ['currentIndex'],
    setup(props: any, { emit }) {
      const router = useRouter()
      const { toClipboard } = useClipboard()
      const submitPick = ref()
      const withdraw = ref()
      const detail = ref()
      const logisticsOrder = ref()
      const address = ref()
      const data: any = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'outOrderNumberList',
            keyItems: [
              { label: '出库单号', value: 'outOrderNumberList' },
              { label: '平台单号', value: 'platOrderNumberList' },
              { label: '跟踪号', value: 'trackingNumberList' },
              { label: '运单号', value: 'waybillNumberList' },
              { label: '包裹号', value: 'packageNumberList' },
            ],
            keyWidth: '100',
            value: ref(),
            placeholder: '请输入',
            label: '出库单号',
            width: 160,
            isMultiple: true,
          },
          {
            key: 'marketplaceIdList',
            label: '站点',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            key: 'sellerMarketId',
            label: '店铺',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            type: 'input_keyword',
            key: 'productSkuList',
            keyItems: [
              { label: 'SKU', value: 'productSkuList' },
              { label: 'MSKU', value: 'mskuList' },
              { label: '商品名称', value: 'productNameList' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 160,
            isMultiple: true,
          },
          {
            key: 'salerIdList',
            label: '物流渠道',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            key: 'salerIdList',
            label: '销售员',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            type: 'keyword_date_range',
            key: 'gmtPurchase',
            keyItems: [
              { label: '下单时间(+8)', value: 'gmtPurchase' },
              { label: '下单时间(+0)', value: 'gmtPurchase0' },
              { label: '创建时间', value: 'gmtCreate' },
              { label: '承诺发货时间', value: 'gmtLatestShip' },
              { label: '实际发货时间', value: 'gmtShip' },
              { label: '标发货时间', value: 'gmtVirtualShip' },
            ],
            keyWidth: '130',
            value: ref(),
            placeholder: '请输入',
            label: '下单时间(+8)',
            width: 200,
          },
        ],
        tableList: [],
        loading: false,
        ids: [],
        expandedKeys: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        searchValue: {},
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        selectRowList: [],
        now: Date.now(),
        title: '',
        showLogDialog: false,
        id: '',
        InventoryList: [],
      })

      const getMarketList = async () => {
        const res = await getShopMarketAll()
        let arr = res.data.map((e: any) => {
          e.label = e.marketplaceName
          e.value = e.marketPlaceId
          return e
        })
        data.filterItem[1].optionItems = arr
      }
      const getShopListByShare = async () => {
        const res = await findShopMarketByParam()
        let arr = res?.data
        arr.map((e: any) => {
          e.label = e.shopName
          e.value = e.sellerMarketId
        })
        data.filterItem[2].optionItems = arr
      }

      const getUSerList = async () => {
        let params = {
          depart: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res: any = await getOrganizesUser(params)
        if (res.code == 'SUCCESS') {
          let arr = res.data?.records
          arr.map((e: any) => {
            e.label = e.userName
            e.value = e.id
            return e
          })
          data.filterItem[5].optionItems = arr
        }
      }

      const btnHandleSelect = (type: string, item: any) => {
        switch (type) {
          case '提交拣货':
            data.ids.push(item.id)
            data.title = '提交拣货'
            submitPick.value.visible = true
            break
          case '直接出库':
            router.push({
              path: '/warehouse/orderOutHouse/components/directShipment',
              query: {
                ids: item.id,
                type: '直接出库',
              },
            })
            break
          case '打印面单':
            data.ids.push(item.id)
            print()
            data.ids = []
            break
          case '撤回待审核':
            data.ids.push(item.id)
            data.title = type
            withdraw.value.visible = true
            break
          case '撤回待处理':
            data.ids.push(item.id)
            data.title = type
            withdraw.value.visible = true
            break
          case '修改拣货员':
            data.ids.push(item.id)
            data.title = type
            submitPick.value.visible = true
            break
          case '完成拣货':
            completePick(item)
            break
          case '日志':
            console.log(item)
            data.id = item.order.id
            data.showLogDialog = true
            break
          case '确认出库':
            router.push({
              path: '/warehouse/orderOutHouse/components/directShipment',
              query: {
                ids: item.id,
                type: '确认出库',
              },
            })
            break
          case '物流下单':
            data.ids = []
            data.ids.push(item.id)
            logisticsOrder.value.visible = true
        }
      }

      const completePick = (item: any) => {
        Modal.warning({
          title: '提示',
          content: '确认出库单已完成拣货，转到待出库！',
          titleAlign: 'start',
          hideCancel: false,
          onBeforeOk: async (done) => {
            const res: any = await completePicking([item.id])
            if (res) {
              Message.success('已完成拣货')
              getList()
              done(true)
            }
          },
        })
      }

      const directShipment = () => {
        if (!data.ids[0]) {
          return Message.error('请选择要出库的数据')
        }
        router.push({
          path: '/warehouse/orderOutHouse/components/directShipment',
          query: {
            ids: data.ids.join(','),
            type: '直接出库',
          },
        })
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const searchByVal = (info: any) => {
        console.log(info)
        data.searchValue = {}
        data.searchValue = info
        if (data.searchValue.startDate) {
          data.searchValue.startDate = `${data.searchValue.startDate} 00:00:00`
          data.searchValue.endDate = `${data.searchValue.endDate} 23:59:59`
        }
        data.pageNation.pageNum = 1
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          status: props.currentIndex,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res = await getOrderPackageList(params)
        data.tableList = res?.data?.records || []
        data.pageNation.total = res?.data?.total || 0
        data.loading = false
        data.ids = []
        getAvailableStock()
      }

      const getAvailableStock = async () => {
        let arr: any = []
        data.tableList.forEach((e: any) => {
          e.packageItemList.map((el: any) => {
            el.warehouseCode = e.warehouseCode
            el.sellerId = e.sellerId
            return el
          })
          arr = [...arr, ...e.packageItemList]
        })

        if (arr[0]) {
          let params: any = {
            inventoryItems: [],
          }
          arr.forEach((e: any) => {
            let obj = {
              key: `${e.orderId}_${e.id}`,
              sellerId: e.sellerId || '',
              sku: e.productSku,
              warehouseCode: e.warehouseCode,
            }
            params.inventoryItems.push(obj)
          })

          const res = await findInventoryBatch(params)
          data.InventoryList = res?.data?.inventoryItems || []
        }
      }

      const filterStatus = (num: number) => {
        let text = ''
        if (num == 201) {
          text = '已退款'
        } else if (num == -200) {
          text = '已退货'
        } else if (num >= -199 && num <= -100) {
          text = '已取消'
        } else if (num >= 200 && num <= 299) {
          switch (num) {
            case 201:
              text = '待审核'
              break
            case 202:
              text = '待发货'
              break
            case 203:
              text = '部分发货'
              break
            case 204:
              text = '多渠道中'
              break
          }
        } else if (num >= 600 && num <= 699) {
          text = ' 已发货'
        } else {
          text = '未知'
        }
        return text
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0]
        } else {
          return item.productPic
        }
      }

      const orderRemark = (item: any) => {
        let list = (item && item.remarkList) || []
        if (list[0]) {
          return list[0].remark
        }
      }

      const copy = async () => {
        let arr = data.tableList.map((e: any) => e.order.platformOrderNumber)
        try {
          // 复制
          await toClipboard(arr.join('\n'))
          Message.success('复制成功')
          // 复制成功
        } catch (e) {
          // 复制失败
        }
      }

      const submit = () => {
        if (!data.ids[0]) {
          return Message.error('请选择要提交拣货的数据')
        }
        data.title = '提交拣货'
        submitPick.value.visible = true
      }
      const print = async () => {
        if (!data.ids[0]) {
          return Message.error('请选择要打印面单的数据')
        }
        const res = await printExpressLabel(data.ids)
        if (res.data) {
          data.ids = []
          window.open(res.data)
        }
      }

      const showLogisticsOrderModal = () => {
        if (!data.ids[0]) {
          return Message.error('请选择要下单的数据')
        }
        logisticsOrder.value.visible = true
      }

      const showDetail = (item: any) => {
        data.id = item.id
        detail.value.visible = true
      }

      const showAddress = (item: any) => {
        data.id = item.id
        address.value.visible = true
        // console.log(item)
      }

      const printOutOrder = () => {
        if (!data.ids[0]) {
          return Message.error('请选择需要打印出库单的数据')
        }
        router.push({
          path: '/warehouse/orderOutHouse/components/printPDF',
          query: {
            ids: data.ids.join(','),
          },
        })
      }

      const availableStock = (item: any) => {
        let obj = {
          num: '',
          show: false,
        }
        let info = data.InventoryList.find((e: any) => e.key == `${item.orderId}_${item.id}`)
        if (info && info.amtAvailable !== null) {
          if (info.amtAvailable < item.qtyShipped) {
            obj.show = true
            obj.num = info.amtAvailable
          } else {
            obj.num = info.amtAvailable
            obj.show = false
          }
        }
        return obj
      }

      watch(
        () => props.currentIndex,
        () => {
          setTimeout(() => {
            console.log(props.currentIndex)

            sizeChange(20)
          }, 180)
        }
      )

      getMarketList()
      getShopListByShare()
      getUSerList()
      getList()
      return {
        ...(toRefs(data) as any),
        btnHandleSelect,
        directShipment,
        changePage,
        sizeChange,
        getList,
        filterStatus,
        getImage,
        orderRemark,
        searchByVal,
        copy,
        submit,
        submitPick,
        print,
        withdraw,
        detail,
        showDetail,
        showLogisticsOrderModal,
        logisticsOrder,
        address,
        showAddress,
        printOutOrder,
        availableStock,
      }
    },
  })
</script>

<style lang="less" scoped>
  .icon-address {
    font-size: 12px;
    // color: red;
  }

  .product-status {
    background-color: #169bd5;
    color: white;
    text-align: center;
    height: 16px;
    line-height: 16px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 10px;
    span {
      display: inline-block;
      transform: scale(0.7);
    }
  }

  .icon-error {
    font-size: 12px;
    color: #f59c27;
  }

  :deep(.arco-statistic-value) {
    font-size: 14px !important;
    color: red;
  }

  .label-text {
    color: #999999;
    // width: 60px;
  }

  .btn-icon {
    font-size: 24px;
    margin-top: 4px;
    margin-left: 5px;
  }

  .stockout {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid red;
    color: red;
    font-size: 12px;
    border-radius: 5px;
    transform: scale(0.7);
    margin-top: -3px;
  }
  .receipt-con {
    height: calc(100vh - @menuAndTabHeight);
    width: 100%;
    .product-item {
      display: flex;
      padding: 10px 30px;
      box-sizing: border-box;
      .left {
        width: 900px;
        .left-item {
          display: flex;
          height: 75px;
          padding: 10px 0;
          box-sizing: border-box;
          width: 100%;
          border-bottom: 1px dashed #d7d7d7;
          &:last-child {
            border-bottom: none;
          }
        }
      }
      .right {
        width: 300px;
        margin-left: 10px;
        border-left: 1px solid #d7d7d7;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
</style>
